<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue'
import UserAppSidebar from '@/views/LLMStudio2/ChatModelPanel/UserAppSidebar/index.vue'
import ChatInterface from '@/views/LLMStudio2/ChatModelPanel/ChatInterface/index.vue'
import type { AppItem } from '@/types/userApp'
import { useRouter, useRoute } from 'vue-router'
import TopNavLayout from '@/layouts/TopNavLayout.vue'
const router = useRouter()
const route = useRoute()

const selectAppId = ref<number>(0)
const chatInterfaceRef = ref<InstanceType<typeof ChatInterface> | null>(null)

const handleSelectApp = (appId: number): void => {
  router.push(`/llm-studio/chat/${appId}`)
}

const updateApp = () => {
  selectAppId.value = Number(route.params.id)
  chatInterfaceRef.value?.changeApp(selectAppId.value)
}

onMounted(updateApp)

watchEffect(() => {
  if (route.name === 'chat') {
    updateApp()
  }
})
</script>

<template>
  <TopNavLayout class="bg-#F9FAFB h-screen w-full">
    <div class="flex h-full w-full">
      <UserAppSidebar
        class="w-350px"
        @select-app="handleSelectApp"
        :selected-app-id="selectAppId"
      />
      <ChatInterface class="flex-1" ref="chatInterfaceRef" />
    </div>
  </TopNavLayout>
</template>

<style scoped lang="scss"></style>
